<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <title>结算对账单</title>
    <%@include file="/include/header.html" %>
    <link rel="stylesheet" href="${ctx}/statics/css/blanceDrop.css">
    <link rel="stylesheet" href="${ctx}/statics/css/update.css?v=20200825">
    <link rel="stylesheet" href="${ctx}/statics/css/common.css?v=20200825">
    <script type="text/javascript" src="${ctx}/appjs/tenant/user/tenantSetting.js"></script>
    <style>
        #pdfDom{
            position: relative !important;
        }
        #pdfDom .auditingBtn {
            margin-bottom: 80px !important;
        }
        #pdfDom table{
            border-collapse: collapse;
            border-bottom: 1px solid grey;
        }
        #pdfDom td{
            width: 800px;
            padding-left: 10px;
            line-height: 30px;
            height: 100%;
            color: #000;
        }
        #pdfDom tbody{
            display: flex;
            flex-wrap: wrap;
        }
        #pdfDom tbody tr{
            width: 50%;
            border: 1px solid grey;
            border-bottom: 1px solid grey;
        }
        #pdfDom .totalTr td{
            background: #99ccff;
        }
    </style>
</head>
<body>
<div class="billSection" id="pdfDom">
    <input type="hidden" name="billOrderId" id="billOrderId" value="${acctBillOrderResultVo.billOrderId}">
    <input type="hidden" id="billTotalMoney" value="${acctBillOrderResultVo.billTotalMoney}">
    <h1 class="billTitle">${acctBillOrderResultVo.stationName}结算对账单</h1>
    <div class="downLoadBill" style="cursor: pointer" onclick="makeMpdf('${acctBillOrderResultVo.stationName}结算对账单 (<fmt:formatDate value="${acctBillOrderResultVo.billEndTime}" pattern="yyyy-MM-dd"/>)', 'pdfDom')">下载</div>
    <div class="topBlock">
        <span>结算订单号：${acctBillOrderResultVo.billOrderNum}</span>
        <span>结算订单期间：<fmt:formatDate value="${acctBillOrderResultVo.billStartTime}"
                                     pattern="yyyy-MM-dd"/>~<fmt:formatDate value="${acctBillOrderResultVo.billEndTime}"
                                                                            pattern="yyyy-MM-dd"/></span>
    </div>
    <input type="hidden" id="contractPath" value="${contractPath}">
    <div class="contentBlock">
        <div class="blockTitle">
            对应分销商&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span >${tenantOperator.operatorName}</span>
            <div class="block" style="margin-top: 0;margin-left: auto">
                <span class="label">结算状态:</span>
                <c:if test="${acctBillOrderResultVo.status == 0}"><span class="num">待审核</span></c:if>
                <c:if test="${acctBillOrderResultVo.status == 1}"><span class="num">待确认账单</span></c:if>
                <c:if test="${acctBillOrderResultVo.status == 2}"><span class="num">复核中</span></c:if>
                <c:if test="${acctBillOrderResultVo.status == 3}"><span class="num">结算完成</span></c:if>
                <c:if test="${acctBillOrderResultVo.status == 4}"><span class="num">待推送</span></c:if>
            </div>
        </div>
        <div class="blockTitle">订单信息</div>
        <div class="block">
            <span class="label">订单数:</span>
            <span class="num">${acctBillOrderResultVo.orderCount}</span>
        </div>
        <div class="block">
            <span class="label">平台电量:</span>
            <span class="num">${acctBillOrderResultVo.totalPower}</span>
        </div>
        <div class="block">
            <span class="label">平台电费:</span>
            <span class="num">${acctBillOrderResultVo.totalElecMoney}</span>
        </div>
        <div class="block">
            <span class="label">平台服务费:</span>
            <span class="num">${acctBillOrderResultVo.totalSeviceMoney}</span>
        </div>
        <div class="block">
            <span class="label">平台优惠金额:</span>
            <span class="num">${acctBillOrderResultVo.totalDiscountMoney}</span>
        </div>
        <div class="block">
            <span class="label">平台总金额:</span>
            <span class="num">${acctBillOrderResultVo.totalMoney}</span>
        </div>
        <div class="block">
            <span class="label">平台实收金额:</span>
            <span class="num">${acctBillOrderResultVo.payAmount}</span>
        </div>
<c:if test="${acctBillOrderResultVo.consultOrderAmount!='' && acctBillOrderResultVo.consultOrderAmount!=null}">
        <div class="block">
            <span class="label">咨询订单金额:</span>
            <span class="num">${acctBillOrderResultVo.consultOrderAmount}</span>
        </div>
</c:if>
    </div>
<%--    <div class="contentBlock">--%>
<%--        <div class="blockTitle">结算费用信息</div>--%>
<%--        <div class="block">--%>
<%--            <span class="label">结算电费:</span>--%>
<%--            <span class="num">${acctBillOrderResultVo.billTotalElecMoney}</span>--%>
<%--        </div>--%>
<%--        <div class="block">--%>
<%--            <span class="label">结算服务费:</span>--%>
<%--            <span class="num">${acctBillOrderResultVo.billTotalSeviceMoney}</span>--%>
<%--        </div>--%>
<%--        <div class="block">--%>
<%--            <span class="label">结算金额:</span>--%>
<%--            <span class="num" >${acctBillOrderResultVo.billTotalMoney}</span>--%>
<%--        </div>--%>
<%--&lt;%&ndash;        <div class="block">&ndash;%&gt;--%>
<%--&lt;%&ndash;            <span class="label">调整金额:</span>&ndash;%&gt;--%>
<%--&lt;%&ndash;            <span class="num">${acctBillOrderResultVo.adjustPayAmount}</span>&ndash;%&gt;--%>
<%--&lt;%&ndash;        </div>&ndash;%&gt;--%>
<%--        <div class="block">--%>
<%--            <span class="label">最终金额:</span>--%>
<%--            <span class="num">${acctBillOrderResultVo.factAmount}</span>--%>
<%--        </div>--%>
<%--        <div class="block">--%>
<%--            <span class="label">结算状态:</span>--%>
<%--            <c:if test="${acctBillOrderResultVo.status == 0}"><span class="num">待审核</span></c:if>--%>
<%--            <c:if test="${acctBillOrderResultVo.status == 1}"><span class="num">待确认账单</span></c:if>--%>
<%--            <c:if test="${acctBillOrderResultVo.status == 2}"><span class="num">复核中</span></c:if>--%>
<%--            <c:if test="${acctBillOrderResultVo.status == 3}"><span class="num">结算完成</span></c:if>--%>
<%--        </div>--%>
<%--    </div>--%>
    <div class="contentBlock">
        <div class="blockTitle">结算信息</div>
        <%--<div class="block ruleBlock">结算电费=${acctBillOrderResultVo.elecAcctRule}</div>--%>
        <%--<div class="block ruleBlock">结算服务费=${acctBillOrderResultVo.serviceAcctRule}</div>--%>
        <table style="width: 100%;margin-top: 20px">
            <tr style="width: 100%">
                <td style="width: 100%;float: right;text-align:right;background:#99ccff;padding-right: 20px">结算总金额（元）:${acctBillOrderResultVo.totalAcctAmount}</td>
            </tr>
            <tr class="elecTr">
                <td>平台电费=${acctBillOrderResultVo.totalElecMoney}</td>
<%--                <c:choose>--%>
<%--                    <c:when test="${acctBillOrderResultVo.acctRuleId!=null} && ${acctBillOrderResultVo.acctRuleId!=''}">--%>
<%--                        <td>平台电费=${acctBillOrderResultVo.totalElecMoney}</td>--%>
<%--                    </c:when>--%>
<%--                    <c:otherwise>--%>
<%--                        <td>平台电费=${acctBillOrderResultVo.billTotalElecMoney}</td>--%>
<%--                    </c:otherwise>--%>
<%--                </c:choose>--%>
            </tr>
            <tr class="serviceTr">
                <td>平台服务费=${acctBillOrderResultVo.totalSeviceMoney}</td>
<%--                <c:choose>--%>
<%--                    <c:when test="${acctBillOrderResultVo.acctRuleId!=null} && ${acctBillOrderResultVo.acctRuleId!=''}">--%>
<%--                        <td>平台服务费=${acctBillOrderResultVo.totalSeviceMoney}</td>--%>
<%--                    </c:when>--%>
<%--                    <c:otherwise>--%>
<%--                        <td>平台服务费=${acctBillOrderResultVo.billTotalSeviceMoney}</td>--%>
<%--                    </c:otherwise>--%>
<%--                </c:choose>--%>
            </tr>
            <c:forEach items="${acctSubItems}" var="item">
                <tr class="elecTr">
                    <td></td>
                </tr>
                <tr class="serviceTr">
                    <td>${item.subItem}</td>
                </tr>
            </c:forEach>
            <tr class="elecTr">
                <td>+调整电费=${acctBillOrderResultVo.adjustElecAmount}</td>
            </tr>
            <tr class="serviceTr">
                <td>+调整服务费=${acctBillOrderResultVo.adjustServiceAmount}</td>
            </tr>
            <tr class="totalTr">
                <td>结算电费（元）:${acctBillOrderResultVo.elecAcctAmount}</td>
            </tr>
            <tr class="totalTr">
                <td>结算服务费（元）:${acctBillOrderResultVo.serviceAcctAmount}</td>
            </tr>
        </table>
    </div>
    <div class="contentBlock remarkBlock">
        <div class="blockTitle">备注</div>
        <c:if test="${not empty acctBillOrderResultVo.remark}">
            <div class="remark">${acctBillOrderResultVo.remark}</div>
        </c:if>
    </div>
    <div class="contentBlock contractBlock">
        <div class="blockTitle">合同信息</div>
        <%--<div class="block">合同编号：JT-DSF-2019-07--广州启天新能源科技有限公司<span class="checkIcon">查看</span></div>--%>
        <%--<div class="block">合同编号：JT-DSF-2019-07--广州启天新能源科技有限公司<span class="checkIcon">查看</span></div>--%>
        <c:forEach items="${acctContractList}" var="acctContract">
            <div class="block">合同名称：${acctContract.contractName}<span class="checkIcon" style="cursor: pointer"
                                                                      onclick="contractModal('${acctContract.contractPdf}')">查看</span>
            </div>
        </c:forEach>
    </div>
    <div class="tips">*以上信息请务必慎重确认，确认无误后再发送给分销商，以便减少结算错误率。</div>
<c:if test="${acctBillOrderResultVo.status != 0 && acctBillOrderResultVo.status != 2 }">
    <div class="sealBlock">
        <img src="${ctx}/statics/img/seal.png" class="seal" alt="">
        <p>日期：<fmt:formatDate value="${acctBillOrderResultVo.pushTime}" pattern="yyyy-MM-dd HH:mm:ss"/></p>
    </div>
</c:if>

    <div class="confirmModal hide">
        <span style="position: absolute;right: 10px;top: 5px;cursor: pointer" onclick="closeBtn()">X</span>
        <div>请认真查看结算单数据，如有异议，请操作”有异议，打回“操作，让平台再次进行审核，
            打回后，务必提前联系平台，加快处理效率，谢谢！
        </div>
        <div class="inputBlock">
            <span class="label" style="flex-shrink: 0">驳回原因:</span><textarea style="width: 100%" rows="5" id="rejectRemark"
                                                                             name="rejectRemark"></textarea>
        </div>
        <div class="buttonBlock">
            <div class="cancleButton">有异议，打回</div>
            <div class="confirmButton">确认没问题</div>
        </div>
    </div>
    <div class="invoiceModal" id="invoiceModal" style="display: none">
        <div class="contentBlock">
            <iframe id="myFrameId" name="myFrameName" src="" scrolling="no" frameborder="0"></iframe>
            <%--<ul>--%>

            <%--</ul>--%>
        </div>
    </div>

    <%--  关联审核明细的模态框  --%>
    <div class="auditingModal hide">
        <span style="position: absolute;right: 20px;top: 5px;cursor: pointer" onclick="acctBillOrder.closeBtn()">X</span>
        <div class="title">请认真查看结算单数据，如需调整金额，可在下面调整金额操作框进行调整！</div>
        <div class="inputBlock">
            <span class="label">调整电费:</span><input type="number"  id="adjustElecAmount" name="adjustElecAmount"><span class="inputTips">向上调是正数，向下调是负数</span>
        </div>
        <div class="inputBlock">
            <span class="label">调整服务费:</span><input type="number"  id="adjustServiceAmount" name="adjustServiceAmount"><span class="inputTips">向上调是正数，向下调是负数</span>
        </div>
        <div class="inputBlock">
            <span class="label" style="flex-shrink: 0">备注:</span><textarea style="width: 100%" rows="5" id="remark"
                                                                           name="remark"></textarea>
        </div>
        <div class="buttonBlock">
            <div class="cancleButton addReviewAcctBillOrder billPage">不需调整</div>
            <div class="confirmButton addReviewAcctBillOrder billPage">确定</div>
        </div>
    </div>
</div>



</body>
</html>
<script src="${ctx}/libjs/plugins/jspdf/html2canvas.js"></script>
<script src="${ctx}/libjs/plugins/jspdf/jspdf.js"></script>
<script src="${ctx}/appjs/acct/acctBillOrder.js"></script>
<script type="text/javascript">//将html页面导出.pdf格式文件(适用于jQuery、vue库)  -- xzz 2018/04/24

function saveReviewAcctBillOrder() {
    $(".auditingModal").removeClass("hide");
}

function closeBtn(){
    $(".confirmModal").addClass("hide");
}

$(".downLoadBill").click(function () {

})

function contractModal(contractPdf) {
    var contractPath = $("#contractPath").val();
    $("#myFrameId").attr("src",contractPath+contractPdf);
    setTimeout(function () {
        layer.open({
            type: 1,
            title: '合同预览',
            closeBtn: false,
            shade: 0.4,
            shift: 7,
            maxWidth: '622px',
            shadeClose: true,
            content: $("#invoiceModal"),
            btn: ['取消'],
            btn1: function (index) {//layer.msg('yes');    //取消
                layer.close(index)
            },

        });
    }, 100)

}


function makeMpdf(pdfName, elementId) {
    if (confirm("您确认下载该PDF文件吗?")) {
        //var target = document.getElementsByClassName("right-aside")[0];
        var target = document.getElementById(elementId);
        target.style.background = "#FFFFFF";
        if (pdfName == '' || pdfName == undefined) pdfName = "content";
        var scale = 2//放大倍数
        var canvas = document.createElement("canvas");
        html2canvas(target, {

            onrendered: function (canvas) {
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;
                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth /841.89* 592.28;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //页面偏移
                var position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 841.89;
                var imgHeight = 841.89 / contentWidth * contentHeight;
                var pageData = canvas.toDataURL('image/jpeg', 1.0);

                var pdf = new jsPDF('l', 'pt', 'a4');

                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                } else {
                    while (leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 595.28;
                        //避免添加空白页
                        if (leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }
                pdf.save(pdfName + ".pdf");
            }
        })
    }
}

</script>
